<!DOCTYPE html>
<!-- Reader -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/reader_login.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        function getQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        $(function () {
            var p = getQueryString("phone");
            if(p!=null || p!=""){
                $("[name=phone]").val(p);
            }
        })
        function vertify(){
            var phone = $("[name=phone]").val();
            var password = $("[name=password]").val();
            if(phone == "" || password == ""){
                $("#message").html("The phone or password cannot be empty!");
                $(".tanchuceng").css("display","block");
            }else{
                $.ajax({
                    url:"/vertify",
                    type:"post",
                    data:{
                        "phone":phone,
                        "password":password
                    },
                    success:function (data) {
                        if(data != "" && data.register == "yes"){
                            window.location.href="/welcome?name=" + data.rname + "&phone=" + data.phone;
                        }else if(data != "" && data.register == "registering" && data.deposit == 300){
                            $("[name=password]").val("");
                            $("#message").html("Please wait for librarian to agree!");
                            $(".tanchuceng").css("display","block");
                        }else if(data != "" && data.register == "registering" && data.deposit == 0){
                            $("[name=password]").val("");
                            $("#message").html("Please pay the deposit first!");
                            $(".tanchuceng").css("display","block");
                            setTimeout(function () {
                                window.location.href = "/payDep?phone=" + phone;
                            },2000)
                        }else{
                            $("[name=password]").val("");
                            $("#message").html("The phone or password is incorrect!");
                            $(".tanchuceng").css("display","block");
                        }
                    }
                })
            }
        }
        function find(){
            var phone = $("[name=phone]").val();
            if(phone == "") {
                $("#message").html("The phone cannot be empty!");
                $(".tanchuceng").css("display", "block");
            } else{
                window.location.href ="/sendpassword/findpassword?phone=" + phone;
            }
        }
        function exit(){
            $(".tanchuceng").css("display","none");
        }
    </script>
</head>
<body>
    <div class="main clearfix">
        <header class="header clearfix">
            <i class="iconfont icon-yun"></i>
            <i>Library</i>
        </header>
        <div class="content">
            <div id="photo">
                <i class="iconfont icon-yonghu"></i>
            </div>
            <div class="login clearfix">
                <div class="phone">
                    <i>phonenumber </i>
                    <p>
                        <input placeholder="Please input your phone number" type="text" name="phone" >
                    </p>
                </div>
                <div class="password">
                    <i>password </i>
                    <p class="wt">
                        <input placeholder="Enter your password" type="password" name="password" >
                    </p>
                    <a onclick="find()" style="cursor: pointer;color: blue;text-decoration: underline">forget it?</a>
                </div>
                <div class="register">
                    New user please click <a href="/readerRegister">here</a> to register.
                </div>
                <button id="btn" onclick="vertify()">Login</button>
            </div>
        </div>
        <footer class="footer">
            <div class="mandarin">
                <img src="images/mandarin.png" alt="">
            </div>
            <p>Shan ICP number18018134 | Powered by 1713011</p>
        </footer>
    </div>

    <div class="tanchuceng">
        <div class="msg">
            <div class="exit" onclick="exit()">x</div>
            <p id="message"></p>
        </div>
    </div>
</body>
</html>